<template>
  <div>
    <Header :show="show" :user="user" ref="hea" />
    <div class="content">
      <van-tabs
        v-model="active"
        line-width="13.889vw"
        swipeable
        sticky
        ref="tabs"
        :offset-top="height"
      >
        <van-tab :title="itemv.name" v-for="(itemv,index) in data" :key="index">
          <!-- <div class="plus">
            <van-icon name="plus" />
          </div>-->
          <van-list
            v-model="itemv.loading"
            :finished="itemv.finished"
            :immediate-check="false"
            @load="onLoad"
          >
            <Content v-for="(items,index) in itemv.pathData" :key="index" :item="items" />
          </van-list>
        </van-tab>
      </van-tabs>
      <van-popup
        v-model="ishow"
        overlay
        round
        closeable
        :style="{ height: '60%',width:'90%',borderRadius:'5%'}"
        close-icon="close"
      >
        <AT @btn="Btn" />
      </van-popup>
      <van-popup v-model="showNav" position="bottom" :style="{ height: '100%'}">
        <HeaderNav @showNav="showNavS" @Index="Index" />
      </van-popup>
    </div>
  </div>
</template>

<script>
// import Content from "../components/content";
// import Header from "../components/header";
// import AT from "../views/personal/attention";
export default {
  components: {
    Content: () => import("../components/content"),
    Header: () => import("../components/header"),
    AT: () => import("../views/personal/attention"),
    HeaderNav: () => import('../components/headerNav')
  },
  data() {
    return {
      showNav: false,
      ishow: false,
      data: [],
      user: [],
      height: '',
      active: 0,
      show: true,
      overlay: true,

    };
  },
  watch: {
    active() {
      if (this.data[this.active].pathData.length == 0) {
        this.article();
      }
    }
  },
  methods: {
    Btn(shows) {
      this.ishow = shows;
      // console.log(shows);

      this.getarticle();
    },
    onLoad() {
      this.data[this.active].pageIndex += 1;
      this.article();
      // console.log(1234);
    },
    getarticle() {
      if (localStorage.getItem("add")) {
        const newData = JSON.parse(localStorage.getItem("add")).map(res => {
          return {
            ...res,
            pathData: [],
            pageSize: 8,
            pageIndex: 1,
            loading: false,
            finished: false
          };
        });
        if (!localStorage.getItem('token')) {
          this.data = newData.filter(res => {

            return res.name != '关注'
          })
        } else this.data = newData;

        this.article();
        console.log(this.data);
      } else {
        this.$axios({
          url: "/category"
        }).then(res => {
          const newData = res.data.data.map(res => {
            return {
              ...res,
              pathData: [],
              pageSize: 8,
              pageIndex: 1,
              loading: false,
              finished: false
            };
          });
          this.data = newData;
          this.article();
          // console.log(this.data);
        });
      }
    },
    article() {
      this.$axios({
        url: "/post",
        params: {
          category: this.data[this.active].id,
          pageSize: this.data[this.active].pageSize,
          pageIndex: this.data[this.active].pageIndex
        }
      }).then(res => {
        this.data[this.active].pathData = [
          ...this.data[this.active].pathData,
          ...res.data.data
        ];
        if (
          this.data[this.active].name == "关注" &&
          this.data[this.active].pathData.length == 0
        ) {
          this.ishow = true;
        }
        // console.log();
        this.data[this.active].loading = false;
        if (res.data.data.length < this.data[this.active].pageSize) {
          this.data[this.active].finished = true;
          // console.log(this.data[this.active].pathData);
        }
      });
    },
    showNavS(shows) {
      this.showNav = shows
      // this.$router.go(0)
      this.getarticle();
    },
    Index(index) {
      this.showNav = false
      const Index = this.data.filter(res => {
        return res.id == index
      })
      const Indexs = this.data.indexOf(Index[0])
      // console.log(Index);
      // console.log(this.data);
      // console.log(Indexs);
      this.active = Indexs

      // this.article()

    }
  },
  created() {

    if (localStorage.getItem("token") == null) {
      this.show = false;
    }
    if (localStorage.getItem("token")) {      this.$axios({
        url: "/user/" + localStorage.getItem("userId")
      }).then(res => {
        this.user = res.data.data;
        // console.log(res.data.data);
        localStorage.setItem("nickname", this.user.nickname);
        // console.log(localStorage.getItem("nickname"));
        localStorage.setItem("img", this.user.head_img);
      });    }
    this.getarticle();
    // this.$axios({
    //   url: "/user_comments"
    // }).then(res => {
    //   console.log(res);
    // });
  },
  mounted() {
    //     console.log(document.querySelector('.header'));
    this.$nextTick(() => {
      this.height = localStorage.getItem('height') + 'px';
      // // console.log(document.querySelector('Header'));
      // console.log(this.$refs.hea);
    })
    // console.log(this.$refs.tabs.toggle());


    document.querySelector('.van-sticky').onclick = e => { //点击整个.vant-sticky
      console.log(e.target.className)//这里可以试试点击不同位置，输出的点击目标是哪个
      console.log(3333);
      // this.showNav = true
      if (e.target.className === 'van-sticky' || e.target.className === 'van-sticky van-sticky--fixed') {
        this.showNav = true //写入跳转事件
        console.log(888);
      }
    }
  }
};
</script>

<style lang="less" scoped>
// /deep/.plus {
//   position: fixed;
//   // display: inline-block;
//   top: 0;
//   right: 0px;
//   // font-size: 20px;
//   width: 50px;
//   height: 50px;
//   background-color: blue;
//   line-height: 50px;
//   text-align: center;
//   z-index: 9999 !important;
//   /deep/ .van-icon {
//     font-size: 6.25vw;
//     color: red;
//     z-index: 3000;
//   }
// }
.www {
  text-decoration: none;
}
/deep/.van-tabs__wrap {
  width: 99vw;
  // padding-right: 12vw;
}
/deep/.van-sticky {
  background-color: #fff;
}
/deep/.van-sticky::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-size: 12.5vw;
  color: red;
  line-height: 11.5vw;
  width: 14vw;
  text-align: center;
  background-color: #fff;
}
/deep/ .van-tabs-sticky {
  height: 16.667vw;
}
/deep/ .van-tab {
  font-size: 3.889vw;
  // z-index: 100;
}
/deep/ .van-tabs--line .van-tabs__wrap {
  height: 12.222vw;
}
.nav {
  background-color: #eee;
  ul {
    li {
      display: inline-block;
      padding: 10px;
      font-size: 16px;
    }
  }
}
.content {
  margin-top: 63px;
  // position: relative;
}
</style>
